<template>
    <div>
        <mt-swipe :auto="4000">
            <!--在组件中使用v-for 必须使用key-->
            <!--将来谁用此组件 谁来传递组件的lunbotuList-->
            <!--此时轮播图的数据源 应该是父组件向子组件传值来设置-->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.img">
                <img :src="item.img" :class="{full : isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!--分析:为什么商品评论中的图如此的丑-->
    <!--1. 首页中的图片 宽和高是使用了100%的-->
    <!--2. 在商品详情页面中 轮播图的图片也使用这样的宽高 页面肯定不好看-->
    <!--3. 商品详情页中的轮播图 期望高100% 宽自适应-->
    <!--4. 经过分析 得到问题的原因:首页和详情的轮播图分歧点为宽度不同-->
    <!--5. 既然轮播图其他方面相同 只区别于宽度 那么就定义一个属性来让使用轮播图的调用者手动指定宽度是否为100%-->
</template>

<script>
    import mui from '../../lib/mui-master/dist/js/mui.min.js'

    export default {
        data(){
            return{

            }
        },
        mounted(){
            // 初始化数字选择框
            mui(".mui-numbox").numbox();
        },
        props:["lunbotuList", 'isfull']
    }
</script>

<style lang="scss" scoped>
    .mint-swipe{
        height:250px;
        text-align: center

    /*.mint-swipe-item{*/
    /*&:nth-child(1){*/
         /*background-color: lightcoral;*/
     /*}*/
    /*&:nth-child(2){*/
         /*background-color: lightgreen;*/
     /*}*/
    /*&:nth-child(3){*/
         /*background-color: lightblue;*/
     /*}*/
    /*}*/
    }
    img{
        height:100%;
    }
    .full{
        width:100%;
    }
</style>